<template>
  <a-card title="本周变更数据趋势类型分析" :bordered="false" :headStyle="{ padding: '0 15px', border:0, marginTop: '15px'}" style="width:100%">
    <ve-histogram :data="changeTypeData" :judge-width="true" :extend="chartExtend" height="280px"></ve-histogram>
  </a-card>
</template>

<script>
// import { getMcaCount } from '@/api/performance'
import moment from 'moment'
export default {
  name: 'ChangeType',
  components: {
  },
  data () {
    return {
      chartExtend: {
        legend: {
          show: true,
          top: '0'
        },
        dataZoom: [
          {
            type: 'inside'// inside表示内置的鼠标缩放滑动
          }
        ],
        grid: {
          top: '15%',
          left: '1%',
          right: '3%',
          bottom: '5%',
          containLabel: true
        },
        color: ['#4ad2ff', '#00b436', '#fdcc74', '#4f91f1'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow', // type:"cross"
            crossStyle: {
              color: '#999'
            }
          }
        }
      },
      changeTypeData: {
        columns: ['类型', '访问用户'],
        rows: [
          { '类型': '类型一', '访问用户': 1393 },
          { '类型': '类型二', '访问用户': 393 },
          { '类型': '类型三', '访问用户': 193 },
          { '类型': '类型四', '访问用户': 133 },
          { '类型': '类型五', '访问用户': 113 },
          { '类型': '类型六', '访问用户': 193 }
        ]
      }
    }
  },
  created () {
  },
  mounted () {
    // 轮询接口
    const timers = window.setInterval(() => {
      setTimeout(res => {
      }, 0)// 利用定时器清除setInterval的每次叠加
    }, 60000)// 1分钟执行一次
    // this.once在离开当前路由时销毁定时器
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timers)
    })
  },
  /**
   * 数字格式化为千分位
   */
  filters: {
    format: function (value) {
      return value.toLocaleString()
    }
  },
  methods: {
  }
}
</script>
<style lang="less" scoped>
  .ant-card{
    /deep/.ant-card-body{
      padding:0 15px 15px 15px;
    }
  }
</style>
